<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>余额提现</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
    <meta content="yes" name="apple-mobile-web-app-capable">     
    <meta content="black" name="apple-mobile-web-app-status-bar-style">     
    <meta content="telephone=no" name="format-detection">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="/H5/css/sm.min.css">
    <link rel="stylesheet" href="/H5/css/reset.css">
    <link rel="stylesheet" href="/H5/css/withdraw_money.css?v=1">
</head>
<body>
	<div class="page-group ms-controller" :controller="draw">
        <div class="page page-current">
            <header class="bar bar-nav">
              	<a class="icon icon-left pull-left" href="javascript:window.history.go(-1);"></a>
              	<a class="icon icon-home pull-right" href="/H5"></a>
              	<h1 class="title">余额提现</h1>
            </header>
            <div style="margin-bottom: 0;top: 2.5rem; position: absolute; width: 100%; z-index: 999999">
                <div class="buttons-tab">
                    <a :on-click="@typeChoose(1)" :class="@type==1?'tab-link active button':'tab-link button'">余额提现</a>
                    <a :on-click="@typeChoose(2)" :class="@type==2?'tab-link active button':'tab-link button'">提现记录</a>
                </div>
                <div class="buttons-tab" :visible="@type==2" style="font-size: .5rem">
                    <a :on-click="@jump(0)" :class="@status==0?'tab-link button active':'tab-link button'" style="font-size:.75rem;height: 1.6rem;line-height:1.6rem">已提交</a>
                    <a :on-click="@jump(1)" :class="@status==1?'tab-link button active':'tab-link button'" style="font-size:.75rem;height: 1.6rem;line-height:1.6rem">已发放</a>
                    <a :on-click="@jump(2)" :class="@status==2?'tab-link button active':'tab-link button'" style="font-size:.75rem;height: 1.6rem;line-height:1.6rem">已驳回</a>
                </div>
            </div>  
            <div class="content visibility infinite-scroll infinite-scroll-bottom" data-distance="100" :css="{'top': type==1?'5rem':'6rem'}">
                <div class="tabs">
                    <div id="tab1" :visible="@type==1" class="tab active">
                        <div class="list-block" style="margin:0; padding:0;">
                        	<p class="reminder">
                                温馨提示：提现系统开启时间 周一至周五 9:00~14:00 当前手续费为{{@fee_percent*100+"%"}}
                            </p>
                            <ul class="balance line_buttom">
                            	<li class="first_balance">可提现余额:<b style=" margin-left:12px;color:red;">￥{{@info.balance}}</b></li>
                                <li>
                                    <div class="item-content">
                                        <div class="item-inner">
                                            <div class="item-title label">提现金额</div>
                                            <div class="item-input">
                                                <input type="number" class="input" style="margin-left: 1rem" :duplex="@money" placeholder="金额">
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="item-content">
                                        <div class="item-inner">
                                            <div class="item-title label">汇款银行</div>
                                            <div class="item-input">
                                                <span style="float: right; margin-right: .5rem">{{@info.bank_type_label}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="item-content">
                                        <div class="item-inner">
                                            <div class="item-title label">银行账户</div>
                                            <div class="item-input">
                                                <span style="float: right; margin-right: .5rem">{{@info.bank_no}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="item-content">
                                        <div class="item-inner">
                                            <div class="item-title label">收款姓名</div>
                                            <div class="item-input">
                                                <span style="float: right; margin-right: .5rem">{{@info.real_name}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
<!--                            <li>
                                    <div class="item-content">
                                        <div class="item-inner">
                                            <div class="item-title label">支付密码</div>
                                            <div class="item-input">
                                                <input type="password" class="input" placeholder="请输入支付密码">
                                            </div>
                                        </div>
                                    </div>
                                </li> -->
                            </ul> 
                            <button class="balance_btn" :on-click="@tx">提 现</button> 
                        </div>     
                    </div>
                    <div id="tab2" :visible="@type==2" class="tab active">
                        <p class="reminder">
                        	温馨提示：您已成功提现的总金额 <b style=" color:#F60;">￥{{(@data.total_draw_money-0).toLocaleString('en-US')}}</b>
                        </p>
                        <div class="present_record" :for="el in @list">
							<ul class="present_record_first">
                                <li>提款金额</li>
                                <li class="present_record_li">￥{{el.draw_money}}</li>
							</ul>
                            <ul class="present_record_first">
                                <li>扣除费用</li>
                                <li class="present_record_li">￥{{el.fee_money}}</li>
							</ul>
                            <ul class="present_record_first">
                                <li>实际到账</li>
                                <li class="present_record_li" style="color:red;">￥{{el.pay_money}}</li>
							</ul>
							<ul class="present_record_first">
                                <li>开户银行</li>
                                <li class="present_record_li">{{@info.bank_type_label}}</li>
							</ul>
							<ul class="present_record_first">
                                <li>银行账号</li>
                                <li class="present_record_li">{{@info.bank_no}}</li>
							</ul>
							<ul class="present_record_first">
                                <li>收款人</li>
                                <li class="present_record_li">{{@info.real_name}}</li>
							</ul>
							<ul class="present_record_first">
                                <li>提交时间</li>
                                <li class="present_record_li">{{el.create_time}}</li>
							</ul>
							<ul :visible="@status>0" class="present_record_first">
                                <li>受理时间</li>
                                <li class="present_record_li">{{el.update_time}}</li>
							</ul>
                        </div>
                    </div>
                </div>                        
			</div>
	    </div>
	</div>
	<script type='text/javascript' src='/H5/js/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/sm.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/avalon.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/simpleStorage.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/mall.js' charset='utf-8'></script>
    <script>
    	var draw = avalon.define({
    		$id: "draw",
    		type: Mall.parseUrl( window.location.href ).type,
    		status: Mall.parseUrl( window.location.href ).status||0,
    		money: "",
    		info: {},
            fee_percent: simpleStorage.get( "fee_percent" )||"",
    		list: [],
    		data: {total_draw_money:0},
    		more: false,
    		page_num: 1,
    		page_size: 10,
    		loading: false,
    		jump: function(status){
    		    if( typeof status === "undefined" ){
    		        return
    		    }
    		    draw.list = [];
    		    var url = window.location.href.split( "&status=" )[0]+"&status="+status;
    		    draw.page_num = 1;
    		    draw.status = status;
    		    window.history.replaceState(null, null, url);
    		    draw.getList();
    		},
		    typeChoose: function( t ){
	            var url = window.location.href.split( "?type=" )[0]+"?type="+t;
	            draw.type = t;
	            draw.page_num = 1;
    		    draw.status = 0;
				window.history.replaceState(null, null, url);
                t == 2 && draw.getList();
				if( t == 1 ){
                    draw.more = false;
                    if( $( ".empty" ).length ){
                        $( ".empty" ).remove();
                    }
                }
		    },
    		tx: function(){
    			var postData = {
    				draw_money: draw.money
    			}
    			$.prompt("请输入支付密码", function( value ){
    				postData.pay_password = value;
    				Mall.request( "/api/DrawCash", postData )
    					.always( function( data ){
    						if( data.error_code == 0 ){
    							$.toast( "提交成功", 1000, "success", function(){
    								window.location.href = "/H5/draw?type=2&status=0";
    							} )
    						}
    						else{
    							$.alert(data.error_msg);
    						}
    					} )
    			})
    			$( "input.modal-text-input" ).attr( "type", "password" )
    		},
    		getInfo: function(){
    			Mall.request( "/api/UserInfo" )
    				.always( function( data ){
    					if( data.error_code == 0 ){
    						if( !data.data.bank_no ){
    							$.alert( "请点击确定完善个人信息", function(){
    								window.location.href = "/H5/memberperfect"
    							} )
    						}
    						else{
	    						draw.info = data.data;
	    						$( ".content" ).removeClass( "visibility" );
    						}
    					}
    					else{
    						$.alert(data.error_msg)
    					}
    				} )
    		},
    		getList: function( o ){
	        	var postData = {
		        	page_num: draw.page_num,
		        	page_size: draw.page_size,
		        	status: draw.status
		        };
			    if( draw.loading ){
			    	return
			    }
		        draw.loading = true;
		        Mall.request( "/api/DrawList", postData )
		        	.always( function( data ){
		        		if( data.error_code == 0 ){
		        			draw.data = data.data;
	        				if( draw.page_num == data.data.page_total ){
	        					draw.more = false;
	        				}
	        				else{
	        					if( data.data.list.length == 0 ){
	        						draw.more = false;
	        					}
	        					else{
	        						draw.more = true;
	        					}
	        				}
        					if( o ){
        				    	draw.list = draw.list.concat( data.data.list );
        					}
        					else{
        						draw.list = data.data.list;
        					}
        					draw.page_num ++;
		        		}
		        		else{
		        		    $.alert(data.error_msg);
		        		}
		        		draw.loading = false;
		        	} )
    		},
    		infinite: function(){
    			$(document).on('infinite', '.infinite-scroll-bottom',function() {
    				if( draw.more ){
    					draw.getList( true );
    				}
    			});
    			$.init();
    		}
    	})
    	draw.getInfo();
    	draw.infinite();
    	draw.type == 2 && draw.getList();
    	avalon.scan( document.body );
    </script>
</body>
</html>
